<template>
	<div class="item">
		<div>
			<span class="label">产品编码:</span>
			<span class="value">{{goods.productCode}}</span>
		</div>
		<div>
			<span class="label">产品名称:</span>
			<span class="value">{{goods.productName}}</span>
		</div>
		<div>
			<span class="label">产品规格:</span>
			<span class="value">{{goods.spec}}</span>
		</div>
		<div>
			<span class="label">待入库量:</span>
			<span class="value">{{goods.inNum}}{{goods.unit}}</span>
		</div>
	</div>
	<div class="initem">
		<span class="label">收货库区:</span>
		<select class="sel">
			<option>成都总仓-A区</option>
		</select>
	</div>

	<div class="initem">
		<span class="label">入库数量:</span>
		<input type="text" class="ipt" placeholder="" />
		<span class="unit">公斤</span>
	</div>
	<div class="initem">
		<span class="label">生产日期:</span>
		<input type="text" placeholder="点击选择日期" class="ipt" :value="date" @click="show = true" readonly />
		<van-calendar v-model:show="show" @confirm="onConfirm" />
	</div>
	<div class="btn">提交入库</div>
</template>

<script setup>
	import {
		ref,onMounted
	} from 'vue'
	import {useRoute} from 'vue-router'
	const route=useRoute();
	
	//入库信息
	const goods=ref({});
	
	const show = ref(false);
	const date = ref('');
	const formatDate = (date) => {
		return `${date.getFullYear()}-${date.getMonth() + 1}-${date.getDate()}`;
	};
	const onConfirm = (value) => {
		show.value = false;
		date.value = formatDate(value);
	};
	
	
	onMounted(()=>{
		goods.value=route.query;
	});
</script>

<style scoped>
	.unit{
		display: inline-block;
		color: #999;
		white-space: nowrap;
		margin-left: 0.1rem;
		
	}
	.initem {
		width: 7rem;
		height: 1.2rem;
		margin: 0 auto;
		display: flex;
		align-items: center;
	}

	.sel {
		width: 5.5rem;
		height: 0.6rem;
		margin-left: 0.1rem;
	}

	.ipt {
		width: 5.3rem;
		height: 0.5rem;
		margin-left: 0.1rem;
	}

	.item {
		width: 7.5rem;
		font-size: 0.3rem;
		color: #333;
		border-bottom: #999 solid 1px;
		padding: 0.2rem 0;
	}

	.item div {
		height: 0.6rem;
		line-height: 0.6rem;
		margin: 0 0.2rem;
	}

	.label {
		color: #666;
		white-space: nowrap;
	}

	.value {
		margin-left: 0.1rem;
	}
	
	.btn{
		width: 7rem;
		height: 0.7rem;
		line-height: 0.7rem;
		text-align: center;
		background-color: #FF6600;
		color: #fff;
		border-radius: 0.1rem;
		margin: 2rem auto;
	}
</style>
